<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- Estilos CSS -->
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet">
<link href="css/layout-default.css" rel="stylesheet">

<!-- JavaScripts -->
<!-- Google Maps -->
<!--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAYedh7nevUhCnBbCsvt9yIW2ImadglHko&sensor=false"></script>
<!-- Librería Multiples Markers -->
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js"></script>
<!-- jQuery & jQuery UI -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<!-- jQuery Layout -->
<script src="js/jquery.layout.min.js"></script>
<script src="js/mapa.js"></script>

<script type="text/javascript">
	// Constantes
	var itece_resource 	= "http://itece.waapy.com/upload/candidatos/";
	var icon_ok			= 1.0,	// Opacidad de los iconos
		icon_fail 		= 0.4;

	// Variables
	var layouts;
	var layoutTecnico	= true;	// true = candidato, false = provincia

	// Variables Tabs
	var tab;					// Número de tab actual
	var tabs;					// Tabs de jQuery UI
	var tabTemplateNoEditable 	= "<li><a href='#{href}'><i class='icon-th-list'></i> #{label}</a></li>";
	var tabTemplateEditable 	= "<li><a href='#{href}'><i class='icon-search'></i> #{label}</a><span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";
	var tabCounter = 0;

	// Variables Formulario
	var formProvinciaID;
	
	// Variables Tecnicos
	var tabs 			= [];
	var tecnicos 		= [];	// Array de técnicos ordenados por ID
	var tecnicosCluster = [];	// Array de técnicos sin orden
	var lastMarker;
	var icon_url_path 	= "img/ciudades/"
	
	var settings = {
		'map.center': [40, -3.70],
		'map.circle.fillColor': '#9ACD32',
		'map.circle.strokeColor': '#9ACD32'
	};
	var marker;						// Marker de las provincias
	
	// Chinchetas
	var chinchetas = [];
	chinchetas[0] = new google.maps.MarkerImage("img/tecnico_nada.png",null, null, new google.maps.Point(18, 18));
	chinchetas[1] = new google.maps.MarkerImage("img/tecnico_descartado.png",null, null, new google.maps.Point(18, 18));
	chinchetas[2] = new google.maps.MarkerImage("img/tecnico_preseleccionado.png",null, null, new google.maps.Point(18, 18));
	chinchetas[3] = new google.maps.MarkerImage("img/tecnico_seleccionado.png",null, null, new google.maps.Point(18, 18));
	chinchetas[4] = new google.maps.MarkerImage("img/tecnico_itece.png",null, null, new google.maps.Point(18, 18));

	/**
	 * Inicialización de variables.
	 */
	function initialize() {
		// Mapa Google Maps
		map = new google.maps.Map(document.getElementById("map_canvas"), {
			zoom: 7,
			center: new google.maps.LatLng(settings['map.center'][0], settings['map.center'][1]),
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			panControl: false,
			streetViewControl: false
		});

		// Tabs
		tabs = $('#tabs').tabs();
		formProvinciaID = 0;
	}
	
	/**
	 * Gestión de Eventos
	 */
	function set_events()
	{
		/**
		 * Botón de Mostrar Técnicos,
		 * desde el formulario de de poblaciones.
		 */
		$("#show_tecnicos").on('change', function() { 
			load_tecnicos($(this).is(':checked')); 
		});

		/**
		 * Evento de eliminar una Tab.
		 */
		tabs.delegate( "span.ui-icon-close", "click", function() {
			// ID del panel y número de tab
			var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
			var tab 	= tabs.tabs("option", "active");

			// Elimina el panel y lo refresca
			$( "#" + panelId ).remove();
			tabs.tabs( "refresh" );

			// Reordena el array de tecnicosCluster para que conserve el mismo número de índice que los tabs
			var i;
			tecnicosCluster[tab] = null;
			for(i = tab; i < tabCounter - 1; i++){
				tecnicos[i]			= tecnicos[i+1];
				tecnicosCluster[i] 	= tecnicosCluster[i+1];
			}
			tecnicos[i] = null;
			tecnicosCluster[i] = null;
			tabCounter--;
		});

		/**
		 * Evento de cambiar de Tab.
		 * Cambia el conjunto de chinchetas del mapa.
		 */
		tabs.on("tabsactivate", function (event, ui) {
			// Cambia el entorno de ventanas
			map.setOptions({
				zoom: 7,
				center: new google.maps.LatLng(settings['map.center'][0], settings['map.center'][1])
			});

			// Elimina los Markers
			if(markerClusterer != null){
				//alert('[Antes] Clusters: ' + markerClusterer.getTotalClusters() + ' Markers: ' + markerClusterer.getTotalMarkers());
				markerClusterer.clearMarkers();
				//alert('[Despues] Clusters: ' + markerClusterer.getTotalClusters() + ' Markers: ' + markerClusterer.getTotalMarkers());
			}

			// Desactiva los Radios
			if(tecnicos[tab] != null) {
				for(var i = 0; i < tecnicos[tab].length; i++)
				{
					if(tecnicos[tab][i] != undefined && tecnicos[tab][i].radio != null){
						tecnicos[tab][i].radio.setVisible(false);
					}
				}
			}

			// Conjunto de Chinchetas
			tab = tabs.tabs("option", "active");	// Número de tab actual
			markerClusterer = new MarkerClusterer(map, tecnicosCluster[tab], markerClustererOptions);
		});
	}

	/**
	 */
	function borrarFormulario()
	{
		// Borra todos los formarios
		$(".input_reload").val(null);

		// Elimina correo electrónico
		$('#input_header_email a').prop('href', '#');

		// Desactiva iconos formación
		$('#icon-formacion-calener').css('opacity', icon_fail);
		$('#icon-formacion-ce3').css('opacity', icon_fail);
		$('#icon-formacion-ce3x').css('opacity', icon_fail);
		$('#icon-formacion-ite').css('opacity', icon_fail);
		$('#icon-formacion-vehiculo').css('opacity', icon_fail);
		$('#icon-formacion-seguro').css('opacity', icon_fail);
		$('#icon-formacion-camara').css('opacity', icon_fail);
		$('#icon-formacion-curriculum').css('opacity', icon_fail);

		// Elimina enlace formación
		$('#icon-formacion-calener a').attr('href', null);
		$('#icon-formacion-ce3 a').attr('href', null);
		$('#icon-formacion-ce3x a').attr('href', null);
		$('#icon-formacion-ite a').attr('href', null);
		$('#icon-formacion-curriculum a').attr('href', null);
	}
	
	/**
	 * Visualiza un técnico determinado.
	 * @param id ID del técnico.
	 * @param true para hacer zoom sobre el técnico, false para no hacerlo.
	 */
	function abrirTecnico(id, zoom) {
		// Variables
		var position 	= tecnicos[tab][id].marker.getPosition();
		var marker 		= tecnicos[tab][id].marker;

		// Zoom sobre el técnico
		if(zoom){
			map.setOptions({
				center: tecnicos[tab][id].marker.getPosition(),
				zoom: 15
			});
		}

		// Prepara el formulario
		if(!layoutTecnico) {
			$('#ui-layout-east').load('tecnicos/form/');
			layoutTecnico = !layoutTecnico;
		}

		// Marker Actual: añade sus propiedades de selección
		marker.setDraggable(true);
		marker.setAnimation(google.maps.Animation.BOUNCE);

		// Marker Anterior: elimina sus propiedades de selección
		if(lastMarker != null && lastMarker != marker) {
			lastMarker.setDraggable(false);
			lastMarker.setAnimation(null);
		}

		// Actualiza el Marker Anterior
		lastMarker = marker;

		// Borra el contenido del formulario
		borrarFormulario();
		$("#foto").attr("src","");
		$("#foto").css("background-image", "url(public/img/loading.gif)");

		// Abre el layout derecho para mostrar la información del técnico
		layouts.open("east");

		// Completa los datos del formulario
		$.getJSON('tecnicos/view/' + id, function(data){
			// Iconos Formación
			$('#icon-formacion-calener').css('opacity', 	parseInt(data.formacion_calenervyp) ? icon_ok : icon_fail);
			$('#icon-formacion-ce3').css('opacity', 		parseInt(data.formacion_ce3) ? icon_ok : icon_fail);
			$('#icon-formacion-ce3x').css('opacity', 		parseInt(data.formacion_ce3x) ? icon_ok : icon_fail);
			$('#icon-formacion-ite').css('opacity', 		parseInt(data.formacion_ite) ? icon_ok : icon_fail);
			$('#icon-formacion-vehiculo').css('opacity',	parseInt(data.vehiculo_propio) ? icon_ok : icon_fail);
			$('#icon-formacion-seguro').css('opacity', 		parseInt(data.seguro) ? icon_ok : icon_fail);
			$('#icon-formacion-camara').css('opacity', 		parseInt(data.camara_termografica3) ? icon_ok : icon_fail);
			$('#icon-formacion-curriculum').css('opacity', data.doc_name.length > 0 ? icon_ok : icon_fail);

			// Iconos Formación (Curriculum Vitae)
			$('#icon-formacion-calener a').attr('href', data.calener_name.length > 0 ? itece_resource + data.calener_name : null);
			$('#icon-formacion-ce3 a').attr('href', data.ce3_name.length > 0 ? itece_resource + data.ce3_name : null);
			$('#icon-formacion-ce3x a').attr('href', data.ce3x_name.length > 0 ? itece_resource + data.ce3x_name : null);
			$('#icon-formacion-ite a').attr('href', data.ite_name.length > 0 ? itece_resource + data.ite_name : null);
			$('#icon-formacion-curriculum a').attr('href', data.doc_name.length > 0 ? itece_resource + data.doc_name : null);

			// Rellena los campos del Formulario
			$.each(data, function(key, value){

				if(key == "file_name") {	// Foto
					$("#foto").prop('src', itece_resource + value);
				} else if(key == "nota") {	// Foto
					$('#input_puntuacion').val(value);
					$('#text_puntuacion').text(parseFloat(value).toFixed(1));
				} else if(key == "email") {	// Foto
					$('#input_email').val(value.toLowerCase());
					$('#input_header_email a').prop('href', 'mailto:' + value.toLowerCase());
				} else if(key == "comentarios") {
					if(value == null || value == "") {
						$('#input_comentarios').val('Sin comentarios');
						$('#input_comentarios').removeClass('tecnico_comentario_lleno').addClass('tecnico_comentario_vacio');
					} else { 
						$('#input_comentarios').val(value);
						$('#input_comentarios').removeClass('tecnico_comentario_vacio').addClass('tecnico_comentario_lleno');
					}
				} else {					// Resto de campos
					$('#input_'+key).val(value);
				}
			});
		});
	}

	function abrirProvincia(lat, lng){
		// Prepara el formulario
		if(layoutTecnico) {
			$('#ui-layout-east').load('poblaciones/form/');
			layoutTecnico = !layoutTecnico;
		}
		layouts.open("east");
		
		// Información Provincia
		$.getJSON("poblaciones/listByPosition/" + lat + "/" + lng, function(data){
			// Rellena los campos del Formulario
			$.each(data, function(key, value){
				$('#input_' + key).val(value);
			});
		});
	}
	
	function abrirPoblacion(poblacion){
		// Constantes
		var tab = tabCounter;
		var content;

		// Prepara el formulario
		if(layoutTecnico) {
			$('#ui-layout-east').load('poblaciones/form/');
			layoutTecnico = !layoutTecnico;
		}
		layouts.open("east");

		// Información Provincia
		$.getJSON("poblaciones/getByPoblacion", {'poblacion': poblacion}, function(data){
			// Rellena los campos del Formulario
			$.each(data, function(key, value){
				$('#input_' + key).val(value);
			});
		});
	}

	/**
	 *
	 */
	function find()
	{
		// Variables
		var name = $('#search_name').val();
		var type = $('#search_type').val();

		if(type == 'candidato') {
			findTecnico(name);
		} else {
			findProvincia(name);
		}
	}

	/**
	 * Busca un técnico por su nombre o apellidos.
	 * @param name Nombre o apellidos del técnico.
 	 */
	function findTecnico(name)
	{
		// Variables
		var tab = tabCounter;		// Número del tab utilizado
		var content;				// HTML del listado de técnicos
		var url;					// URL de consulta Ajax

		// 
		if(name == null) addTab("Candidatos", img_loading + "Cargando ...", false);
		else addTab(name, img_loading + "Cargando ...", true);

		// URL de carga
		if (name == null) {	// Listado de todos los técnicos
			url = "tecnicos/list";
		} else {			// Listado de los técnico por nombre/apellidos
			url = 'tecnicos/search/' + name;
		}

		// Inicialización antes de Ajax
		tecnicos[tab]			= new Array();
		tecnicosCluster[tab] 	= new Array();
		if(markerClusterer != null) markerClusterer.clearMarkers();			// Elimina los candidatos agrupados (marker clusterer)
		layouts.close("east");
		borrarFormulario();

		// Compone el parámetro de búsuqueda de las provincias
		var first_provincia = true;
		var search_provincias = "";
		$('.search_provincia').each(function(index, value){
			search_provincia += value + ",";
			if(!first_provincia) { 
				search_provincias += ",";
				first_provincia = false;
			}
		});

		// Búsqueda Ajax de candidatos
		$.getJSON(url, $('#search input, #search select'),function(data){
			// Inicialización
			content = "<table><tr><th></th><th>Nombre</th><th>Nota</th></tr>";
			
			// Recore los candidatos encontrados
			$.each(data, function(key, value){
				// Posición
				center = new google.maps.LatLng(value.latitud, value.longitud);	
			
				// Radio
				var radio = new google.maps.Circle({
					map: map,
					center: center,
					radius: value.radio * 1000,
					strokeColor: colores[value.estado],
					strokeOpacity: 0.8,
					strokeWeight: 2,
					fillColor: colores[value.estado],
					fillOpacity: 0.35,
					visible: false,
					tecnicoID: value.id
				});

				// Chincheta
				var marker = new google.maps.Marker({
					map: map,
					icon: chinchetas[value.estado],
					title: value.nombre,
					position: center,
					animation: google.maps.Animation.DROP,
					draggable: false,
					tecnicoID: value.id
				});
				
				// Eventos
				google.maps.event.addListener(marker, 'click', function() {
					abrirTecnico(this.tecnicoID, false);
				});
				google.maps.event.addListener(marker, 'rightclick', function() {	// El evento 'dblclick' no funciona con la propiedad draggable	
					abrirTecnico(this.tecnicoID, true);
				});
				google.maps.event.addListener(marker, 'dragend', function(event){
					changePosicionTecnico(this.tecnicoID, event);
				});
				google.maps.event.addListener(radio, 'dblclick', function(){
					abrirTecnico(this.tecnicoID, false);
				});
				google.maps.event.addListener(radio, 'dblclick', function(){
					abrirTecnico(this.tecnicoID, false);
				});

				// Añade el marker
				value.marker 	= marker;
				value.radio 	= radio;
				tecnicos[tab][value.id] = value;
				tecnicosCluster[tab].push(marker);

				// Lista de Candidatos
				content +=	"<tr>" + 
							"<td><i class='icon-user'></i></td>" + 
							"<td><a href='javascript:abrirTecnico(" + value.id + ", true);'>" + value.nombre + "</a></td>" + 
							"<td>" + value.nota + "</td>" + 
							"</tr>";
			});

			// Sin candidatos
			if(data.length == 0)
				content += "<tr><td>Sin entradas</td></tr>";

			content += "</table>";
			$('#tabs-' + tab).html(content);

			// Conjunto de Chinchetas
			// Solo colocamos los Markers si el tab que le corresponde es el activo
			if(tab == tabs.tabs("option", "active"))
				markerClusterer = new MarkerClusterer(map, tecnicosCluster[tab], markerClustererOptions);
		});
	}

	/**
	 *
	 */
	function findProvincia(name){
		// Constantes
		var img_loading		= "<img src='img/loading.gif'></img> ";
		
		var mcOptions = {	// Marker Clusterer Options
			gridSize: 3, 
			maxZoom: 10
		};

		// Variables
		var tab 			= tabCounter;
		var icon;

		// 
		if(name == null) addTab("Provincias", img_loading + "Cargando ...", false);
		else addTab(name, img_loading + "Cargando ...", true);

		// Inicialización antes de Ajax
		if(markerClusterer != null) markerClusterer.clearMarkers();			// Elimina los candidatos agrupados (marker clusterer)
		layouts.close("east");

		// Búsqueda Ajax de candidatos
		$.getJSON("poblaciones/listName/" + name, function(data){
			// Inicialización
			tecnicos[tab] 			= new Array();
			tecnicosCluster[tab] 	= new Array();
			$('#tabs-' + tab).html(null);
			
			// Comunicades
			for(var i=0; i<data.length; i+=2){
				// Comunidad
				$('#tabs-' + tab).append('' + data[i].comunidad + '');

				// Provincias
				// Recore los candidatos encontrados
				$('#tabs-' + tab).append('<ul>');
				$.each(data[i+1], function(key, value){
					// Selecciona el tipo de icono en función de la densiadad
					var hab = value.habitantes;
					if(hab < 5000)			{ icon = icon_url_path + "city-small-1" 	+ ".png"; } 
					else if(hab < 15000) 	{ icon = icon_url_path + "city-small-2" 	+ ".png"; } 
					else if(hab < 25000) 	{ icon = icon_url_path + "city-medium-1" 	+ ".png"; } 
					else if(hab < 50000) 	{ icon = icon_url_path + "city-medium-2" 	+ ".png"; } 
					else if(hab < 100000) 	{ icon = icon_url_path + "city-big-1" 		+ ".png"; } 
					else 					{ icon = icon_url_path + "city-big-2" 		+ ".png"; }

					// Chincheta
					var marker = new google.maps.Marker({
						map: map,
						icon: icon,
						title: value.poblacion,
						position: new google.maps.LatLng(value.latitud, value.longitud),
						animation: google.maps.Animation.DROP
					});

					// Eventos	
					google.maps.event.addListener(marker, 'click', function() {
						abrirProvincia(value.latitud, value.longitud);
					});

					// Añade el marker
					value.marker 	= marker;
					value.radio 	= null;
					tecnicos[tab][value.id] = value;
					tecnicosCluster[tab].push(marker);

					// Lista de Candidatos
					$('#tabs-' + tab).append('<li><i class="icon-globe"></i> <a href="#'+value.poblacion+'" onclick="abrirPoblacion(\'' + value.poblacion + '\');">' + value.poblacion + " (" + value.provincia + ")" + '</a></i>');
				});
				$('#tabs-' + tab).append('</ul><br>');
			}

			// Sin candidatos
			if(data.length == 0)
				$('#tabs-' + tab).append("Sin entradas");

			// Conjunto de Chinchetas
			// Solo colocamos los Markers si el tab que le corresponde es el activo
			if(tab == tabs.tabs("option", "active"))
				markerClusterer = new MarkerClusterer(map, tecnicosCluster[tab], mcOptions);
		});
	}

	/**
	 * Modifica la posición de un Técnico.
	 * @param id Identificador del técnico.
	 * @param event Evento con la latitud, longitud del técnico. 
	 */
	function changePosicionTecnico(id, event)
	{
		// Actualiza Formulario
		$("#input_latitud").val(event.latLng.lat());
		$("#input_longitud").val(event.latLng.lng());

		// Actualiza bd
		$.ajax({
			type: "POST",
			url: 'tecnicos/setPosicion',
			data: {'uid': id, 'latitud': event.latLng.lat(), 'longitud': event.latLng.lng()}
		});
	}

	// actual addTab function: adds new tab using the input from the form above
    function addTab(title, content, editable) {
    	// Variables
		var label 			= title || "Tab " + tabCounter;
		var id 				= "tabs-" + (tabCounter);
		var tabContentHtml 	= content || "Tab " + tabCounter + " content.";
		if(editable)	li 	= $( tabTemplateEditable.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
		else			li 	= $( tabTemplateNoEditable.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ); 
		
		tabs.find(".ui-tabs-nav").append(li);
		tabs.append( "<div id='" + id + "' class='tab'><p>" + tabContentHtml + "</p></div>");
		tabs.tabs("refresh" );
		tabs.tabs("option", "active", tabCounter);
		tabCounter++;
    }

	/**
	 * Crea un nuevo formulario de búsqueda de Provincias.
	 * @param erasable
 	 */
    function newFormProvincia(erasable)
    {
		// Constantes
		var div = "#search_provincia";
		var html = ''
					+ '<div id="search_provincia_div_' + formProvinciaID + '">'
					+ '<select id="search_provincia_input_' + formProvinciaID + '" name="search_provincia[]" class="search_provincia input-medium">'
						+ '<option value="">-- Provincia --</option>'
					<?php foreach ($provincias as $provincia) { ?>
						+ '<option value="<?php echo $provincia; ?>"><?php echo $provincia ?></option>'
					<?php } ?>
				+ '<select>';

				// Botón de borrable
				if(erasable) 	html += '<a href="#" onclick="$(\'#search_provincia_div_' + formProvinciaID + '\').remove()"><i class="icon-remove"></i></a>';
				else 			html += '<a href="#" onclick="newFormProvincia(true)"><i class="icon-plus-sign"></i></a>';

				html += '</div>';
		// Inserta el formulario a la capa
		$(div).append(html);

		// Incrementa el identificar de provincia
		formProvinciaID++;
    }
	
	$(function(){
		$('body').layout({
			west: {
				minSize: 320,
				maxSize: 500,
				fxSpeed: "slow"
			},
			east: {
				size: 300,
				resizable: false,
				fxSpeed: "slow",
				initClosed: true
			}
		});
		layouts = $("body").layout();
		initialize();
		set_events();
		newFormProvincia(false);
		findTecnico();
		$('#accordion').accordion();
		$('#ui-layout-east').load('tecnicos/form/45');
	});	
</script>
</head>

<body>
	<div class="ui-layout-west">
		<form onSubmit="javascript:find(); return false;">
		<div class="input-prepend input-append" style="width: 100%;">
			<label>Busqueda por:</label>
			<select id="search_type" class="">
				<option value="candidato">Candidato</option>
				<option value="provincia">Poblacion</option>
			</select>
			<br />

			<input type="text" id="search_name" class="span2 search-query" placeholder="Búsqueda..." autofocus>
			<button type="input" class="btn">Buscar</button>
			<br />
			
			<div id="search">
				<label>Provincia:</label>
				<div id="search_provincia"></div>

				<table>
					<tr>
						<td><label>Estado:</label></td>					
						<td>
							<select id="search_estado" name="search_estado" class="input-medium">
								<option value="">-- Selección --</option>
								<option value="0">Sin decidir</option>
								<option value="1">Descartado</option>
								<option value="2">Preseleccionado</option>
								<option value="3">Seleccionado</option>
							</select>
						</td>
					</tr>
					<tr>
						<td><label>Nota:</label></td>
						<td>
							<select id="search_nota" name="search_nota" class="input-medium">
								<option value="">-- Nota --</option>
								<?php foreach (array(10,9,8,7,6,5,4,3,2,1,0) as $nota) { ?>
									<option value="<?php echo $nota ?>"><?php echo $nota ?></option>
								<?php } ?>
							</select>
						</td>
					</tr>
				</table>
			</div>
		</div>
		</form>
		<div id="tabs"><ul></ul></div>
	</div>
	<div id="ui-layout-east" class="ui-layout-east"></div>
	<div id="map_canvas" class="ui-layout-center"></div>
</body>
</html>